<template>
  <el-row>
    <el-col :span="16" :offset="4">
      <el-form ref="ad" :model="adInfo" :rules="rules" label-position="right" label-width="100px">
        <el-form-item label="轮播名称" prop="name">
          <el-input v-model="adInfo.name"></el-input>
        </el-form-item >
        <el-form-item label="链接地址" prop="url" >
          <el-input v-model="adInfo.url">
          </el-input>
        </el-form-item>
        <el-form-item label="上传图片" prop="src" >
          <el-upload ref="pictureUpload"
                     class="avatar-uploader"
                     :action="uploadPath"
                     list-type="picture-card" :headers="uploadHeader"
                     :show-file-list="true"
                     :before-upload="beforeUpload"
                     :on-success="uploadSuccess" :limit="1" :file-list="fileList">
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{file}">
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" height="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
        <el-form-item label="排序值" prop="sortNum" >
          <el-input v-model="adInfo.sortNum">
          </el-input>
        </el-form-item>
        <el-form-item label="类型" prop="type" >
          <el-select v-model="adInfo.type" placeholder="请选择轮播状态">
            <el-option v-for="item in adList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">保存</el-button>
          <el-button type="warning" @click="onReset">返回</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script>

const initAd = {
  bannerId: '',
  name: '',
  url: '',
  src: '',
  sortNum: '',
  type: ''
}
export default {
  name: 'AdEdit',
  data () {
    return {
      fileList: [],
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      uploadHeader: {
        token: ''
      },
      uploadPath: process.env.VUE_APP_BASE_API + '/upload',
      adInfo: { ...initAd },
      rules: {
        name: [{ required: true, message: '请输入轮播名称', trigger: 'blur' }],
        src: [{ required: true, message: '请上传图片', trigger: 'change' }],
        sortNum: [{ required: true, message: '请输入排序值', trigger: 'blur' }],
        type: [{ required: true, message: '请输入轮播类型', trigger: 'change' }]
      },
      adList: [
        {
          value: 1,
          label: '首页'
        },
        {
          value: 2,
          label: '热门'
        }
      ]
    }
  },
  methods: {
    handleRemove (file) {
      this.$confirm('您确定要移除吗?', '询问').then(() => {
        this.$refs.pictureUpload.handleRemove(file)
      })
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    beforeUpload (file) {
      const isImage = file.type === 'image/jpeg' || file.type === 'image/png'
      if (!isImage) {
        this.$message.error('文件格式不正确')
      }
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('图片大小不能超过2M')
      }
      return isImage && isLt2M
    },
    uploadSuccess (data) {
      if (data.code === 200) {
        this.adInfo.src = data.data
      }
    },
    onSubmit () {
      this.$refs.ad.validate((valid) => {
        if (valid) {
          this.$axios.post('/sys/banner/update', this.adInfo).then(({ data }) => {
            if (data.code === 200) {
              this.$alert('保存成功').then(() => {
                this.$router.push('ad')
              })
            } else {
              this.$alert('保存失败')
            }
          })
        }
      })
    },
    onReset () {
      this.adInfo = { ...initAd }
      this.$router.push('/ad')
    },
    init () {
      if (this.$route.query.bannerId) {
        this.$http.get('/sys/banner/info/' + this.$route.query.bannerId).then(({ data }) => {
          const ad = data.data
          this.adInfo = {
            bannerId: ad.bannerId,
            name: ad.name,
            url: ad.url,
            src: ad.src,
            sortNum: ad.sortNum,
            type: ad.type
          }
          this.fileList.push({
            name: this.adInfo.src,
            url: `${process.env.VUE_APP_BASE_API}/img/${this.adInfo.src}`
          })
        })
      }
    }
  },
  created () {
    this.init()
    this.uploadHeader.token = this.$cookies.get('token')
  }
}
</script>

<style scoped>

</style>
